<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工培训管理系统-登录页</title>
<link href="static/css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
	src="static/lib/jquery/1.9.1/jquery.min.js"></script>
<style>
.none {
	display: none;
}

.height-20 {
	height: 20px;;
}

.button {
	color: red;
	font-size: 18px;
	width: 100px;
	height: 18px;;
	border: 1px solid red;
	border-radius: 5px;
}
</style>
<style>
.J_codeimg {
	z-index: -1;
	position: absolute;
}
</style>
</head>
<body>
	<div class="login-box" id="demo">
		<div class="input-content">
			<div class="login_tit">
				<div>
					<i class="tit-bg left"></i> EmpTraining · 手机号登陆 <i
						class="tit-bg right"></i>
				</div>
				<p>Strive&nbsp;&nbsp;&nbsp;&nbsp;Everyday</p>
			</div>
			<p class="p user_icon">
				<input type="text" placeholder="请输入手机号" autocomplete="off"
					class="login_txtbx" id="mobile" name="mobile">
			</p>
			<a>&nbsp;</a>
			<p class="p pwd_icon">
				<input type="text" placeholder="请输入验证码" autocomplete="off"
					class="login_txtbx" id="code" name="code">
			</p>
			<div style="color: white; text-align: center;">
				<input name="choose" type="radio" value="admin" id="ad" /><label
					for="ad">管理员</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
					name="choose" value="emp" type="radio" checked="checked" id="empck" /><label
					for="empck">员工</label>
			</div>
			<div class="signup">
				<a class="gv" href="#" onclick="msgLogin()">登&nbsp;&nbsp;录</a> <a
					class="gv" href="#" onclick="sendCode()">获取验证码</a>
			</div>
		</div>
		<div class="canvaszz"></div>
		<canvas id="canvas"></canvas>
	</div>
	<script>
		//宇宙特效
		"use strict";
		var canvas = document.getElementById('canvas'),
		  ctx = canvas.getContext('2d'),
		  w = canvas.width = window.innerWidth,
		  h = canvas.height = window.innerHeight,
		
		  hue = 217,
		  stars = [],
		  count = 0,
		  maxStars = 2500;//星星数量
		
		var canvas2 = document.createElement('canvas'),
		  ctx2 = canvas2.getContext('2d');
		canvas2.width = 100;
		canvas2.height = 100;
		var half = canvas2.width / 2,
		  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
		gradient2.addColorStop(0.025, '#CCC');
		gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
		gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
		gradient2.addColorStop(1, 'transparent');
		
		ctx2.fillStyle = gradient2;
		ctx2.beginPath();
		ctx2.arc(half, half, half, 0, Math.PI * 2);
		ctx2.fill();
		
		// End cache
		
		function random(min, max) {
		  if (arguments.length < 2) {
		    max = min;
		    min = 0;
		  }
		
		  if (min > max) {
		    var hold = max;
		    max = min;
		    min = hold;
		  }
		
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		
		function maxOrbit(x, y) {
		  var max = Math.max(x, y),
		    diameter = Math.round(Math.sqrt(max * max + max * max));
		  return diameter / 2;
		  //星星移动范围，值越大范围越小，
		}
		
		var Star = function() {
		
		  this.orbitRadius = random(maxOrbit(w, h));
		  this.radius = random(60, this.orbitRadius) / 18; 
		  //星星大小
		  this.orbitX = w / 2;
		  this.orbitY = h / 2;
		  this.timePassed = random(0, maxStars);
		  this.speed = random(this.orbitRadius) / 500000; 
		  //星星移动速度
		  this.alpha = random(2, 10) / 10;
		
		  count++;
		  stars[count] = this;
		}
		
		Star.prototype.draw = function() {
		  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
		    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
		    twinkle = random(10);
		
		  if (twinkle === 1 && this.alpha > 0) {
		    this.alpha -= 0.05;
		  } else if (twinkle === 2 && this.alpha < 1) {
		    this.alpha += 0.05;
		  }
		
		  ctx.globalAlpha = this.alpha;
		  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
		  this.timePassed += this.speed;
		}
		
		for (var i = 0; i < maxStars; i++) {
		  new Star();
		}
		
		function animation() {
		  ctx.globalCompositeOperation = 'source-over';
		  ctx.globalAlpha = 0.5; //尾巴
		  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
		  ctx.fillRect(0, 0, w, h)
		
		  ctx.globalCompositeOperation = 'lighter';
		  for (var i = 1, l = stars.length; i < l; i++) {
		    stars[i].draw();
		  };
		
		  window.requestAnimationFrame(animation);
		}
		
		animation();
		
	</script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use('layer', function(){
		    var layer = layui.layer;
			var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
			$("#mobile").blur(function(){
				var mobile = $("#mobile").val();
				console.log(mobile);
				if(!reg.test(mobile)){
					layer.msg("手机号格式错误!",{icon:5,time:2000});
					console.log("手机号格式错误")
				}
			})
			
		})
		
		function sendCode(){
				var mobile = $("#mobile").val();
				if(mobile==""){
					layer.confirm("请输入手机号",{
						icon : 5,
					});
				}else{
				console.log(mobile);
				layer.confirm("确认发送验证码到手机号"+mobile+"上吗",{
					icon : 3,
					title : '获取验证码'
				},function(index){
					$.ajax({
						type : "post",
						url : "CodeServlet",
						data : {mobile : mobile},
						success:function(data){
							if(data == 200){
								console.log(data);
								layer.msg("验证码已发送!",{icon:1,time:2000});
							}else{
								console.log(data);
								layer.msg("验证码发送失败!",{icon:5,time:2000});
							}
						},
						dataType:"json"
					});
					return false;
				});
				}
				
			}	
		
		function msgLogin(){
			var mobile = $("#mobile").val();
			var code = $("#code").val();
			var choose = $('input[name="choose"]:checked').val(); 
			
			$.ajax({
				type : "post",
				url : "MessageLoginServlet",
				data : {mobile : mobile , code : code , choose : choose},
				success : function(data){
					if(data.code == 1){
						layer.msg("主管登陆成功!",{icon:1,time:2000});
						setTimeout(function(){
							location.href = "DeptMain.jsp?username="+mobile;
						},1000);
					}else if(data.code == 2){
						layer.msg("教员登陆成功!",{icon:1,time:2000});
						setTimeout(function(){
							location.href = "TeacherMain.jsp?username="+mobile;
						},1000);
					}else if(data.code == 3){
						layer.msg("员工登陆成功!",{icon:1,time:2000});
						setTimeout(function(){
							location.href = "Main.jsp?username="+mobile;
						},1000);
					}else if(data.code == 4){
						layer.msg("管理员登陆成功!",{icon:1,time:2000});
						setTimeout(function(){
							location.href = "index.jsp?username="+mobile;
						},1000);
					}else{
						layer.msg("登陆失败!",{icon:5,time:2000});
					}
				},
				dataType:"json"
			});
			return false;
		}
	
	</script>

</body>
</html>